<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-shop"></i>
          养生内容详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="detail-header">
        <el-button
          type="primary"
          icon="el-icon-back"
          size="small"
          @click="goBack"
          >返回列表</el-button
        >
      </div>

      <div v-if="!loading && contentData" class="detail-content">
        <!-- 标题 -->
        <h2 class="content-title">{{ contentData.title }}</h2>

        <!-- 基本信息 -->
        <el-descriptions :column="2" border class="detail-section">
          <el-descriptions-item label="内容ID">
            {{ contentData.id }}
          </el-descriptions-item>
          <el-descriptions-item label="排序">
            {{ contentData.sortOrder }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ contentData.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ contentData.updateTime }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 作者信息 -->
        <div class="detail-section">
          <h3 class="section-title">作者信息</h3>
          <div class="author-info">
            <el-avatar
              v-if="contentData.authorAvatar"
              :src="contentData.authorAvatar"
              :size="80"
              fit="cover"
            ></el-avatar>
            <div class="author-name">{{ contentData.author || "-" }}</div>
          </div>
        </div>

        <!-- 封面图 -->
        <div class="detail-section" v-if="contentData.coverUrl">
          <h3 class="section-title">封面图</h3>
          <el-image
            :src="contentData.coverUrl"
            :preview-src-list="[contentData.coverUrl]"
            fit="contain"
            class="cover-image"
          ></el-image>
        </div>

        <!-- 摘要 -->
        <div class="detail-section" v-if="contentData.summary">
          <h3 class="section-title">内容摘要</h3>
          <p class="summary-text">{{ contentData.summary }}</p>
        </div>

        <!-- 视频 -->
        <div class="detail-section" v-if="contentData.videoUrl">
          <h3 class="section-title">视频</h3>
          <video
            :src="contentData.videoUrl"
            controls
            class="content-video"
            preload="metadata"
          ></video>
        </div>

        <!-- 详细内容 -->
        <div class="detail-section" v-if="contentData.content">
          <h3 class="section-title">详细内容</h3>
          <div class="content-html" v-html="contentData.content"></div>
        </div>
      </div>

      <el-empty
        v-if="!loading && !contentData"
        description="暂无数据"
      ></el-empty>
    </div>
  </div>
</template>

<script>
import { getContentDetail } from "@/api/regimen";

export default {
  data() {
    return {
      loading: false,
      contentData: null,
      contentId: null,
    };
  },
  created() {
    this.contentId = this.$route.query.id;
    if (this.contentId) {
      this.getDetailData();
    } else {
      this.$message.warning("缺少内容ID");
      this.goBack();
    }
  },
  methods: {
    getDetailData() {
      this.loading = true;
      getContentDetail({ id: this.contentId })
        .then((res) => {
          if (res.code === 2000) {
            this.contentData = res.data;
          } else {
            this.$message.error(res.message || "获取详情失败");
          }
        })
        .catch((err) => {
          this.$message.error("获取详情失败");
          console.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-header {
  margin-bottom: 20px;
}

.detail-content {
  padding: 20px 0;
}

.content-title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #409eff;
}

.detail-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #606266;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;

  .author-name {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }
}

.cover-image {
  max-width: 100%;
  max-height: 500px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.summary-text {
  font-size: 15px;
  line-height: 1.8;
  color: #606266;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  white-space: pre-wrap;
}

.content-video {
  max-width: 100%;
  max-height: 600px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content-html {
  padding: 15px;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-height: 200px;

  ::v-deep img {
    max-width: 100%;
    height: auto;
  }

  ::v-deep p {
    margin-bottom: 10px;
    line-height: 1.8;
  }
}
</style>
